import { defineComponent } from 'vue';
import { organizeScore, troubleDetail } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import './index.less';
import { ElProgress } from 'element-plus';
import Detail from '../Detail';
import { dateFormatter } from '@/utils';
import SearchRow from '../SearchRow';

export default defineComponent({
  name: 'GroupKpi',
  setup() {
    const datas = ref({}) as AnyObject;
    const data = reactive({
      search: {
        month: undefined
      },
      list: [
        {
          key: 'month',
          type: 'popup',
          title: '日期选择',
          icon: 'calendar',
          placeholder: '请选择'
        }
      ]
    }) as AnyObject;

    const detailRef = ref();
    const productDetailRef = ref();
    const tableDetail = [
      { title: '考核项', key: 'item' },
      { title: '实际完成', key: 'finish' },
      { title: '得分/占比', key: 'ratio' },
      { title: '完成率', key: 'finish_rate' }
    ];
    const productTableDetail = [
      { title: '日期', key: 'date' },
      { title: '标题', key: 'title' },
      { title: '详情', key: 'content' }
    ];
    const list = ref([]) as any;
    const detailSlots = ref({
      detail: () => <SearchRow onSearch={getData} data={data} />
    });
    getData();
    function getData() {
      console.log(data.search);
      const month = dateFormatter(data.search.month);
      organizeScore({ month }).then((res) => {
        datas.value = res.data;
        conferList(res.data);
      });
    }
    const conferList = (data: AnyObject) => {
      list.value = [
        {
          item: '产品平均合格率',
          finish: data.pass_rate + '%',
          ratio: `${data.pass_rate_total_score}/${data.pass_rate_score}`,
          finish_rate: data.pass_rate_finish_rate
        },
        {
          item: '生产事故',
          finish: data.trouble,
          ratio: `${data.trouble_total_score}/${data.trouble_score}`,
          finish_rate: data.trouble_finish_rate
        },
        {
          item: '客诉降幅',
          finish: data.complaint,
          ratio: `${data.complaint_total_score}/${data.complaint_score}`,
          finish_rate: data.complaint_finish_rate
        },
        {
          item: '退货率',
          finish: data.return_goods_rate + '%',
          ratio: `${Number(data.return_goods_rate_total_score || 0).toFixed(2)}/${
            data.return_goods_rate_score
          }`,
          finish_rate: data.return_goods_rate_finish_rate
        },
        {
          item: '合计',
          finish: '',
          ratio: `${Number(data.total_score || 0)?.toFixed(2)}/${data.score}`,
          finish_rate: data.finish_rate
        }
      ];
    };
    const viewDetail = async (params?: AnyObject) => {
      if (JSON.stringify(list.value) == '[]') {
        await search(data.search);
      }
      detailRef.value.show = true;
    };
    const search = async (val: AnyObject) => {
      const real_month = dateFormatter(val.month);
      const { data: dd } = await organizeScore({ month: real_month });
      console.log(JSON.stringify(dd) == '[]');

      if (JSON.stringify(dd) == '[]') {
        list.value = [];
      } else {
        conferList(dd);
      }
      console.log(list.value);
    };

    return () => (
      <>
        <SheltV2
          title="组织绩效"
          more="查看全部"
          v-slots={detailSlots.value}
          onViewDetail={viewDetail}
          question="<div><p>【该数据每日02:00更新一次</p><p>组织绩效达成率由4个指标综合计算得出：产品平均合格率、生产事故、客诉降幅、退货率。</p></div>"
        >
          <div class="group_item">
            <p class="title">产品平均合格率：</p>
            <div class="progress_item flex-start">
              <ElProgress
                class="blue_progress"
                stroke-width={15}
                percentage={Number(datas.value?.pass_rate_target || 0)}
              />
              <div class="block blue"></div>
              <div class="block_text">目标</div>
              <div class="condition">
                {'≥ '}
                {datas.value.pass_rate_target}%
              </div>
            </div>
            <div class="progress_item flex-start">
              <ElProgress
                class="orange_progress"
                stroke-width={15}
                percentage={Number(datas.value?.pass_rate || 0)}
              />
              <div class="block orange"></div>
              <div class="block_text">实际</div>
              <div class="condition">{datas.value.pass_rate}%</div>
            </div>
          </div>
          <div class="group_item">
            <p class="title">生产事故：</p>
            <div class="progress_item flex-start">
              <ElProgress
                class="blue_progress"
                stroke-width={15}
                percentage={
                  ((datas.value.trouble_target || 0 + 1) /
                    (datas.value.trouble || 1)) *
                  100
                }
              />
              <div class="block blue"></div>
              <div class="block_text">目标</div>
              <div class="condition">{datas.value.trouble_target}</div>
            </div>
            <div class="progress_item flex-start">
              <ElProgress
                class="orange_progress"
                stroke-width={15}
                percentage={100}
              />
              <div class="block orange"></div>
              <div class="block_text">实际</div>
              <div
                class="condition hover-color"
                onClick={() => (productDetailRef.value.show = true)}
              >
                {datas.value.trouble}
              </div>
            </div>
          </div>
          <div class="group_item">
            <p class="title">客诉数量：</p>
            <div class="progress_item flex-start">
              <ElProgress
                class="blue_progress"
                stroke-width={15}
                percentage={80}
              />
              <div class="block blue"></div>
              <div class="block_text">目标</div>
              <div class="condition">
                {'≤ '}
                {datas.value.complaint_target}
              </div>
            </div>
            <div class="progress_item flex-start">
              <ElProgress
                class="orange_progress"
                stroke-width={15}
                percentage={
                  ((datas.value.complaint || 0) /
                    ((datas.value.complaint_target * 5) / 4 || 1)) *
                  100
                }
              />
              <div class="block orange"></div>
              <div class="block_text">实际</div>
              <div class="condition">{datas.value.complaint}</div>
            </div>
          </div>
          <div class="group_item">
            <p class="title">退货率：</p>
            <div class="progress_item flex-start">
              <ElProgress
                class="blue_progress"
                stroke-width={15}
                percentage={Number(datas.value?.return_goods_rate_target || 0)}
              />
              <div class="block blue"></div>
              <div class="block_text">目标</div>
              <div class="condition">
                {'≤ '}
                {datas.value.return_goods_rate_target}%
              </div>
            </div>
            <div class="progress_item flex-start">
              <ElProgress
                class="orange_progress"
                stroke-width={15}
                percentage={Number(datas.value?.return_goods_rate || 0)}
              />
              <div class="block orange"></div>
              <div class="block_text">实际</div>
              <div class="condition">{datas.value.return_goods_rate}%</div>
            </div>
          </div>
        </SheltV2>
        <Detail
          title="组织绩效"
          ref={detailRef}
          filterDetail={data}
          tableDetail={tableDetail}
          onSearch={search}
          list={list.value}
        />
        <Detail
          title="生产事故"
          ref={productDetailRef}
          tableDetail={productTableDetail}
          requestApi={troubleDetail}
        />
      </>
    );
  }
});
